<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" co ntent="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 单行文本框 -->
    <!-- 使用type属性值被设置为text 的<input>元素创建一个单行文本框（同样的，如果你不提供type属性，text 是默认值）。在你指定的type属性的值在浏览器中是未知的情况下（比如你指定 type="date"，但是浏览器不支持原生日期选择器），属性值text也是备用值。 -->
    <!-- <input type="text"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/text -->
    <!-- <input> 元素的text 类型创建基础的单行文本框. -->
    <p style="font-weight: bold;">input type="text"</p>
    <form action="">
        username: <input name="username"> <br>
        address: <input type="text" name="address" size="10" maxlength="15" value="广西壮族自治区桂林市七星区金鸡路1号"> <br>
        <input type="submit">
    </form>

    <hr>

    <!-- 密码框 -->
    <!-- 通过设置type 属性值为password来设置该类型框： -->
    <!-- 它不会为输入的文本添加任何特殊的约束，但是它会模糊输入到字段中的值(例如，用点或小行星)，这样它就不能被其他人读取。 -->
    <!-- <input type="password"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls -->
    <!-- <input> 元素 里有一种叫做 "password" 的值，给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现。）这个符号会根据用户的浏览器和操作系统来具体显示哪个。 -->
    <p style="font-weight: bold;">input type="password"</p>
    <form action="">
        username: <input name="username"> <br>
        password: <input type="password" name="password" value=""> <br>
        <input type="submit">
    </form>

    <hr>

    <!-- 单选按钮 -->
    <!-- 使用type属性值为radio的 <input>元素来创建一个单选按钮。 -->
    <!-- 几个单选按钮可以连接在一起。如果它们的name属性共享相同的值，那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选；这意味着当其中一个被选中时，所有其他的都将自动未选中。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，并且没有以表单的形式发送任何值。 -->
    <!-- <input type="radio"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio -->
    <!-- <input> 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。 -->
    <!-- 定义一个单选按钮组节 -->
    <!-- 一个单选按钮组由具有相同 name属性的单选按钮组成。 一旦单选按钮组被建立, 选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮。 -->
    <!-- checked -->
    <!-- A Boolean attribute which, if present, indicates that this radio button is the currently selected one in the group. -->
    <p style="font-weight: bold;">input type="radio"</p>
    <form action="">
        gender: <input type="radio" name="gender" value="male"> male
        <input type="radio" name="gender" value="female"> female
        <input type="radio" name="gender" value="" checked> unknown
        <br>
        <input type="submit">
    </form>

    <hr>

    <!-- 复选框 -->
    <!-- 使用type属性值为checkbox的 <input>元素来创建一个复选框。 -->
    <!-- 包含checked属性使复选框在页面加载时自动被选中。 -->
    <!-- <input type="checkbox"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/checkbox -->
    <!-- HTML input元素 <input type="checkbox"> 允许你为表单中（或不在表单中）的提交项选择一个单一值。 -->
    <p style="font-weight: bold;">input type="checkbox"</p>
    <!-- 注意： 若表单提交时，checkbox未勾选，则提交的值并非为value=unchecked；此时的值不会被提交到服务器。 -->
    <form action="">
        courses: <input type="checkbox" name="courses" value="english"> english
        <input type="checkbox" name="courses" value="java" checked> java
        <input type="checkbox" name="courses" value="html5" checked> html5
        <br>
        <input type="submit">
    </form>

    <hr>

    <!-- <input type="submit"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/submit -->
    <!-- submit 类型的 <input>  元素被渲染成按钮. 当 click (en-US) 事件发生时(用户点击按钮是一个典型的点击事件),  用户代理 试图提交表单到服务器. -->
    <!-- 除了所有 <input> 元素共享的属性外，提交 submit 按钮输入还支持以下属性： -->
    <!-- 属性 描述 -->
    <!-- formaction 提交表单数据的URL； 覆盖表单的action 属性（如果有） -->
    <!-- formenctype 一个字符串，指定用于表单数据的编码类型 -->
    <!-- formmethod 提交表单时使用的HTTP方法 (get 或 post) -->
    <!-- formnovalidate 一个布尔值，如果存在，则意味着在将数据提交给服务器之前，表单的字段将不受约束验证（constraint validation） -->
    <!-- formtarget 提交表单后，将服务器返回的响应加载到 browsing context 中 -->
    <p style="font-weight: bold;">input type="submit"</p>
    <form action="https://www.baidu.com/s">
        keyword(baidu): <input type="text" name="wd"> <br>
        keyword(sogou): <input type="text" name="query"> <br>
        email: <input type="email" name="email"> <br>
        <input type="submit"> search by baidu (default) <br>
        <input type="submit" value="查询"> search by baidu (default) <br>
        <input type="submit" formaction="https://www.sogou.com/web"> search by sogou <br>
        <input type="submit" formmethod="POST"> search by baidu (method=post)(error) <br>
        <input type="submit" formnovalidate> search by baidu (novalidate) <br>
        <input type="submit" formtarget="_blank"> search by baidu (target=_blank) <br>
    </form>

    <hr>

    <!-- <input type="reset"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/reset -->
    <!-- <input> type 类型为 "reset" 元素呈现为按钮，且带有默认的 click (en-US) 事件，用于将表单中的所有输入重置为其初始值。 -->
    <p style="font-weight: bold;">input type="reset"</p>
    <form action="">
        username: <input name="username"> <br>
        password: <input type="password" name="password" value=""> <br>
        <input type="reset"> <input type="reset" value="重填"> ~
        <input type="submit"> <input type="submit" value="登录">
    </form>

    <hr>

    <!-- URL 栏 -->
    <!-- 通过type属性的url 值设置该类型框： -->
    <!-- 它为字段添加了特殊的验证约束，如果输入无效的url，浏览器就会报告错误。 -->
    <!-- <input type="url"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/url -->
    <!-- <input> 元素有一个 url 来让用户输入URL -->
    <!-- The input value is automatically validated to ensure that it's either empty or a properly-formatted URL before the form can be submitted. -->
    <p style="font-weight: bold;">input type="url"</p>
    <form action="">
        website: <input type="url" name="website"> <br>
        <input type="submit">
    </form>

    <hr>

    <!-- E-mail 地址框 -->
    <!-- 该类型的框将 type属性设置为  email 值： -->
    <!-- 当使用 type时， 用户需要在框中输入有效的电子邮件地址；任何其他内容都会导致浏览器在提交表单时显示错误。注意，这是客户端错误验证，由浏览器执行： -->
    <!-- 通过包括multiple属性，它还可以让用户将多个电子邮件地址输入相同的输入(以逗号分隔)。 -->
    <!-- <input type="email"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/email -->
    <!-- 带有 "email" (电子邮箱)类型标记的输入框元素(<input>)能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址(非空值且符合电子邮箱地址格式). CSS伪标签 :valid 和 :invalid 能够在校验后自动应用。 -->
    <!-- <input> 元素的 value 属性包含一个会自动验证是否符合电子邮件语法的 DOMString。具体来说，此处有三个格式可以通过验证： -->
    <!-- 一个空字符串（“”），表示用户未输入值或该值已被删除。 -->
    <!-- 单个符合格式的电子邮件地址。并不代表该邮件地址存在，而是说它至少在格式上是正确的，简单地讲就是 "username@domain" 或者 "username@domain.tld"，当然并不局限于此。关于匹配电子邮件地址验证算法的 regular expression，参见 Validation。 -->
    <!-- 当且仅当明确 multiple 属性时，值可以是一个列表，该列表包含一串符合格式的电子邮件地址，且每个地址之间用逗号分隔。列表中，位于每个地址之前和之后的任何空白字符都会被移除。 -->
    <p style="font-weight: bold;">input type="email"</p>
    <form action="">
        my email: <input type="email" name="my_email"> <br>
        friends' emails: <input type="email" name="friends_emails" multiple> <br>
        <input type="submit">
    </form>

    <hr>
    <!-- 滑块 -->
    <!-- 滑块是通过把<input>元素的type属性值设置为range来创建的。正确配置滑块是很重要的；为了达到这个目的，我们强烈建议您设置min、max和step属性。 -->
    <!-- <input type="range"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range -->
    <!-- <input>  range 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，精确值并不重要。通常使用滑块或拨号控件而不是像 number  输入类型这样的文本输入框来表示。 由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。 -->
    <p style="font-weight: bold;">input type="range"</p>
    <form action="">
        age: <input id="age" type="range" name="age" min="20" max="60" value="30" step="5"> <span
            id="age_content"></span> <br>
        <input type="submit">
    </form>
    <script>
        var input_age = document.querySelector('#age');
        var span_age = document.querySelector('#age_content');
        span_age.textContent = input_age.min + ' ' + input_age.value + '  ' + input_age.max;
        input_age.oninput = function () {
            span_age.textContent = input_age.min + ' ' + input_age.value + '  ' + input_age.max;
        }
    </script>

    <hr>

    <!-- 日期时间选择器 -->
    <!-- 使用<input>元素和一个适当的值的type属性来创建日期和时间控制，这取决于您是否希望收集日期、时间或两者都。 -->
    <!-- <input type="date"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/date -->
    <!-- 日期类<input>元素会创建一个让用户输入一个日期的输入区域，可以使用自动验证内容的文本框，也可以使用特殊的日期选择器界面。结果值包括年份，月份和日期，但不包括时间。time 和 datetime-local输入类支持time 和 date/time 输入。 -->
    <p style="font-weight: bold;">input type="date"</p>
    <form action="">
        birthday: <input type="date" name="birthday"> <br>
        <input type="submit">
    </form>
    <!-- <input type="time"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/time -->
    <!-- 类型为time的输入元素<input> ，旨在让用户轻松输入时间（小时和分钟，以及可选的秒）。 -->
    <p style="font-weight: bold;">input type="time"</p>
    <form action="">
        start time: <input type="time" name="strat_time"> <br>
        <input type="submit">
    </form>

    <hr>

    <!-- 数字 -->
    <!-- 用于数字的小部件是用type属性设置为number<input>的元素创建的。这个控件看起来像一个文本框，但是只允许浮点数，并且通常提供一些按钮来增加或减少小部件的值 -->
    <!-- 通过设置min和max属性来约束该值。 -->
    <!-- 通过设置step属性来指定增加和减少按钮更改小部件的步进值大小。 -->
    <!-- <input type="number"> -->
    <!-- "number"类型的 <input> 元素用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。 -->
    <p style="font-weight: bold;">input type="number"</p>
    <p>推荐手机显示</p>
    <form action="">
        count: <input type="number" name="count" min="5" max="95" step="5" value="35"> <br>
        <input type="submit">
    </form>

    <hr>

    <!-- 电话号码栏： -->
    <!-- 通过 type属性的 tel 值设置该类型框： -->
    <!-- <input type="tel"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/tel -->
    <!-- <input>  "tel" 类型的元素用于让用户输入和编辑电话号码。 Unli不同于<input type="email"> 和 <input type="url"> , 在提交表格之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。 -->
    <p style="font-weight: bold;">input type="tel"</p>
    <p>推荐手机显示</p>
    <form action="">
        phone: <input type="tel" name="phone"> <br>
        <input type="submit">
    </form>

    <hr>

    <!-- 图像按钮 -->
    <!-- 图像按钮控件是一个与<img>元素完全相同的元素，除了当用户点击它时，它的行为就像一个提交按钮(见上面)。 -->
    <!-- 图像按钮是使用type属性值设置为image<input>的元素创建的。这个元素支持与<img>元素相同的属性，和其他表单按钮支持的所有属性。 -->
    <!-- 如果使用图像按钮来提交表单，这个小部件不会提交它的值；相反，提交的是在图像上单击处的X和Y坐标(坐标是相对于图像的，这意味着图像的左上角表示坐标0，0)，坐标被发送为两个键/值对： -->
    <!-- X值键是name属性的值，后面是字符串“.x”。 -->
    <!-- Y值键是name属性的值，后面是字符串“.y”。 -->
    <!-- <input type="image"> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/image -->
    <!-- <input type="image"> 标签是一个图片提交按钮。 你必须使用 src 属性来定义图片的源，并且使用alt来定义当图片无法显示的时候的替代文字。 height 和width属性是用来定义图片的高和宽的。 -->
    <p style="font-weight: bold;">input type="image"</p>
    <p>推荐手机显示</p>
    <form action="">
        提交: <input type="image" src="./submit.png"> <br>
        发送-提交: <input type="image" src="./send-submit.png" width="100" height="30" alt="发送提交"> <br>
        发送-提交: <input type="image" src="./send-submit.png" alt="发送提交"> <br>
    </form>

</body>

</html>

<!-- 原生表单部件 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls -->

<!-- <input>：输入（表单输入）元素 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input -->